<template>
	<view>
		<view class="view-bottom-cover">
			<view class="view-file-title">
				<u-row>
					<u-col :span="2">
						<u-button style="text-align: center;" @click="checkedAll">全选</u-button>
					</u-col>
					<u-col :span="8">
						<view style="text-align: center;">已选择{{fileCount}}个文件</view>
					</u-col>
					<u-col :span="2">
						<u-button class="view-bottom-select" @click="unCheckedAll">取消</u-button>
					</u-col>
				</u-row>
			</view>
			<view class="view-file-choosen">
				<u-empty v-if="fileList.length<1" text="您还没有上传文件哦" mode="list"></u-empty>
				<view v-for="(item,index) in fileList" :key="index" class="view-file-info">
					<u-row>
						<u-col :span="2">
							<view class="view-file-check">

								<u-checkbox shape="circle" size="50" v-model="fileList[index].checked" @change="countFile" :name="item.name">
								</u-checkbox>

							</view>
						</u-col>
						<u-col :span="2">
							<view class="view-file-img">
								<view class="view-file-img" v-if="fileIcon[index] === 'doc' || fileIcon[index] ==='docx'">
									<image class="image-file-img" :src="'../../static/images/index/word.png'"></image>
								</view>
								<view class="view-file-img" v-else-if="fileIcon[index] === 'xls' || fileIcon[index] === 'xlsx'">
									<image class="image-file-img" :src="'../../static/images/index/excel.png'"></image>
								</view>
								<view class="view-file-img" v-else-if="fileIcon[index] ==='jpeg' || fileIcon[index] === 'jpg' || fileIcon[index] === 'png'">
									<image class="image-file-img" :src="'../../static/images/index/image.png'"></image>
								</view>
								<view class="view-file-img" v-else-if="fileIcon[index] === 'ppt' || fileIcon[index] === 'pptx' ">
									<image class="image-file-img" :src="'../../static/images/index/ppt.png'"></image>
								</view>
								<view class="view-file-img" v-else>
									<image class="image-file-img" :src="'../../static/images/index/'+fileIcon[index]+'.png'"></image>
								</view>
							</view>
						</u-col>
						<u-col :span="8">
							<view class="view-file-name">{{item.name}}</view>
							<view class="view-file-upload-time">{{item.time}}</view>
							<view class="view-file-size">{{(item.size/1000000).toFixed(2) +'M'}}</view>
						</u-col>


					</u-row>
				</view>
			</view>

			<view class="view-btn-group">
				<!-- <u-button class="btn-btngroup" :ripple="true" type="primary"><u-icon name="plus" color="white" size="30"></u-icon> 上传文件</u-button> -->
				<u-button class="btn-btngroup" :ripple="true" type="success" @click="scanCode">
					<u-icon name="scan" color="white" size="30"></u-icon> 扫码打印
				</u-button>
				<u-button class="btn-btngroup" :ripple="true" type="error" @click="deleteFile">
					<u-icon name="info-circle-fill" color="white" size="30"></u-icon> 删 除
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp()


	export default {


		data() {
			return {
				isPrintting: false,
				fileCount: 0, 	//选中文件个数
				fileList: [], 	//文件列表
				fileIcon: [], 	//文件图标
				selectedFileList: [], 	//被选中的文件列表
				selectedFileListIcon: [], 	//被选中的文件图标
				numList: [{
					name: '上传文件'
				}, {
					name: '扫码打印'
				}, {
					name: '确认订单'
				}, {
					name: '打印'
				}, ],

			}
		},
		onShow: function() {
			// 加载页面的时候将全局变量赋值
			this.fileList = app.fileList,
			this.fileIcon = app.fileIcon
		},
		methods: {
			// 全选
			checkedAll() {
				this.fileList.map(val => {
					val.checked = true;
				})
				this.fileCount = this.fileList.length
			},
			// 取消
			unCheckedAll() {
				this.fileList.map(val => {
					val.checked = false;
				})
				this.fileCount = 0
			},

			//计算选中文件个数
			countFile(e) {
				let selectcount = 0
				this.selectedFileList = []
				if (e.value === true) {
					this.fileCount += 1
				} else {
					this.fileCount -= 1
				}
				for (let i = 0; i < this.fileList.length; i++) {
					// 计算选中的文件个数
					if (this.fileList[i].name === e.name) {
						this.fileList[i].checked === e.value

					}
					// 将选中的文件加入选中文件数组
					if (this.fileList[i].checked === true) {
						this.selectedFileList[selectcount] = this.fileList[i]
						this.selectedFileListIcon[selectcount] = this.fileIcon[i]
						app.selectedFileList = this.selectedFileList
						app.selectedFileListIcon = this.selectedFileListIcon
						selectcount = selectcount + 1
					}
				}
			},
			
			// 删除
			deleteFile() {
				if (this.selectedFileList.length === 0) {
					uni.showToast({
						title: "请选择文件",
						icon: "none"
					})
				}
				else{
					wx.showModal({
						title: '确定删除文件吗？',
						content: '',
						cancelText: '取消',
						confirmText: '确定',
						success: res => {
							let  that = this
							if (res.confirm) {
								uni.showToast({
									title: "正在删除",
									icon: "none"
								})
								for(let i = 0;i < that.selectedFileList.length;i++ ){
									let index = that.fileList.indexOf(that.selectedFileList[i])   //获取被选中的文件在列表中的索引
									that.fileList.splice(index, 1)   //删除对应的项
									that.fileIcon.splice(index, 1)   //删除对应的图标
								}
								
								for(let  i = 0;i < this.selectedFileList.length; i++){   //循环调用删除端口
									that.$deletePersonFile(that.selectedFileList[i].fileUuid).then((res) => {
										
									})
								}
							}
							that.fileCount = 0
						}
					})
					
				}
                
			},

			//扫码选择打印机
			scanCode() {
				let that = this
				let printerUuid
				if (this.selectedFileList.length === 0) {
					uni.showToast({
						title: "请选择文件",
						icon: "none"
					})
				} else {
					uni.scanCode({
						success: function(res) {
							printerUuid = res.result
							uni.showToast({
								title: "正在选择打印机",
								icon: "none"
							})
							that.$getPrinter(printerUuid).then((res) => {
								app.printerUuid = printerUuid
								app.printerName = res.data.data.result.printerName
								app.printerStatus = res.data.data.result.status
								uni.navigateTo({
									url: "../determine/determine"
								})
							})
						}
					});
				}

			}
		}
	}
</script>

<style>
	.top-view {
		margin-top: 40rpx;
	}

	.view-bottom-cover {
		background-color: #f3f4f6;
		/* margin-top: 40rpx; */
		/* height:calc( 100vh - 90rpx); */
		height: 100vh;
		padding: 20rpx 30rpx;

	}

	.view-file-title {
		padding: 20rpx;
		width: 100%;
		height: 70rpx;
		background-color: white;
		text-align: center;
	}

	.view-file-choosen {
		padding: 20rpx;
		width: 100%;
		height: calc(100% - 360rpx);
		background-color: white;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.view-file-info {
		border: 1rpx solid #F1F1F1;
		width: 100%;
		height: 200rpx;
	}

	.view-btn-group {
		margin-top: 15rpx;
		width: 100%;
		height: 190rpx;
	}

	.btn-btngroup {
		margin-top: 15rpx;
		margin-bottom: 15rpx;
		display: block;
	}

	.view-file-img {
		/* background-color: red; */
		margin: 60rpx 10rpx;
		width: 80rpx;
		height: 80rpx;
	}

	.view-file-name {
		/* background-color: red; */
		margin-top: 15rpx;
		margin-bottom: 15rpx;
		width: calc(100% - 10rpx);
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		font-weight: bolder;
	}

	.view-file-upload-time {
		/* background-color: red; */
		margin-top: 15rpx;
		margin-bottom: 15rpx;
		width: calc(100% - 10rpx);
		height: 30rpx;
		line-height: 30rpx;
		font-size: 20rpx;
		color: #C9C9C9;
		text-align: right;
	}

	.view-file-size {
		/* background-color: red; */
		margin-top: 30rpx;
		margin-bottom: 15rpx;
		width: calc(100% - 10rpx);
		height: 30rpx;
		line-height: 30rpx;
		font-size: 20rpx;
		color: #C9C9C9;
		text-align: right;
	}

	.image-file-img {
		width: 100%;
		height: 100%;
	}

	.view-file-check {
		padding-left: 20rpx;
		line-height: 180rpx;
	}

	.view-printer-cover {
		border: 1rpx solid #F1F1F1;
		border-radius: 10rpx 10rpx 0 0;
		background-color: #f3f4f6;
		padding: 20rpx 15rpx 2rpx 15rpx;
		height: 300rpx;
	}

	.view-printer {
		border-radius: 20rpx 20rpx 0 0;
		margin-top: 20rpx;
		padding: 20rpx;
		width: 100%;
		height: 275rpx;
		background-color: white;
		text-align: center;
	}

	.image-printer-img {
		width: 100%;
		height: 100%;
	}

	.view-printer-img {
		/* background-color: red; */
		margin: 30rpx 30rpx;
		width: 130rpx;
		height: 130rpx;
	}

	.view-printer-name {
		/* background-color: red; */
		margin-top: 15rpx;
		margin-bottom: 15rpx;
		width: calc(100% - 10rpx);
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		font-weight: bolder;
		text-align: left;
	}

	.view-printer-status {
		/* background-color: red; */
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		width: 100rpx;
		padding: 10rpx 20rpx;
		color: white;
		height: 60rpx;
		/* line-height: 60rpx; */
	}

	.view-printer-change {
		height: 200rpx;
		line-height: 200rpx
	}

	.online {
		background-color: #71D5A1;
	}

	.offline {
		background-color: #DD6161;
	}

	.view-file-result {
		background-color: #EEEEEE;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		width: 140rpx;
		padding: 10rpx 0x;
		text-align: center;
		color: white;
		height: 60rpx;
		line-height: 60rpx;
		margin-top: 70rpx;
	}

	.success {
		color: #18B566;
	}

	.fail {
		color: #DD524D;
	}

	.waitting {
		color: #E2BF79;
	}
</style>
